<script setup lang="ts">
import { ElLoading, ElMessage, ElMessageBox, type FormRules } from 'element-plus'
import { ref, reactive, computed, onMounted, watch } from 'vue'
import instance from '@/utils/serve'
import { nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search, Document, Finished, Tickets } from '@element-plus/icons-vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { useNavTabStore } from '@/stores'

const route = useRoute()
const navTabStore = useNavTabStore() // 导航信息
// console.log('xxx', route.path)

const id = ref<any>(1)
const name = ref<any>()
const dbNameInfo = ref<any>('')
const tableRef = ref<any>()
const target = ref<any>()
const items = ref<any>([])
const form = ref<any>({})
const formRef = ref<any>()
const queryType = ref<any>('1')
const state = ref({ init: true, query: false, download: false, saveTemplate: false })
const report = ref<any>({
  list: { rows: [], total: 0 },
  query: { pagination: true, page: 1, rows: 20 }
})
const template = ref<any>({
  list: { rows: [], total: 0 },
  query: { pagination: true, page: 1, rows: 20 },
  visible: false,
  loading: false,
  filter: ''
})
// tree_
const riskSpreadRefList = ref<any>({})
const getRiskSpreadRef = (el: any, info: string) => {
  if (el) {
    riskSpreadRefList.value[info] = el
  }
}
// sel_
const selRefList = ref<any>({})
const selRef = (el: any, info: string) => {
  if (el) {
    selRefList.value[info] = el
  }
}

interface RuleForm {
  dim: string
  ind: string
  date: string
}
const rules = reactive<FormRules<RuleForm>>({
  dim: { required: true, message: '请选择查询维度' },
  ind: { required: true, message: '请选择查询指标' },
  date: { required: true, message: '请选择查询时间' }
})

let loadings = ElLoading.service({
  lock: true,
  text: '页面正在加载中，请稍候...',
  background: 'rgba(255, 255, 255, 0.7)'
})
const init = async () => {
  state.value.init = true
  const info = route.meta.attributes as any
  // console.log('///cccxxx', info)

  if (info.new_url) {
    id.value = Number(info?.new_url.split('?')[1]?.split('=')[1]) || 1
    // id.value = 6
  } else {
    id.value = 1
  }
  // console.log('xxx', id.value)

  // id.value = Number(route.meta.attributes.new_url.split('?')[0]) || 1
  await instance
    .post('/reportConfig/getConfig/' + id.value)
    .then((data: any) => {
      dbNameInfo.value = data.db_name
      name.value = data.report_name
      // console.log('data', data.table_name)

      target.value = data.table_name?.trim()
      if (target.value.startsWith('{')) target.value = Function('return ' + target.value)()
      let forms = ref<any>({ dim: null, ind: null, date: null })
      const format =
        data.acct_format == 1
          ? 'YYYY-MM-DD'
          : data.acct_format == 2
            ? 'YYYY-MM'
            : data.acct_custom_format
      const type =
        data.acct_type == 1
          ? data.acct_format == 2
            ? 'monthrange'
            : 'daterange'
          : data.acct_format == 2
            ? 'month'
            : 'date'
      items.value = data.cond.reduce(
        (r: any, c: any, i: any) => {
          forms.value[c.cond_field] = null //表单加入所有条件属性
          r.push({
            id: 'cond' + i,
            name: c.cond_name,
            field: c.cond_field,
            data: data.dict[c.dict_id],
            multiple: c.multi_select == '1',
            isTree: c.isTree,
            selected: null,
            dim: c.dim?.map((s: any) => {
              const formI = form.value['cond' + i + '_' + s.order_no]
              const formV = form.value['cond' + i + '_' + s.order_no + '_name']
              return {
                ...s,
                isShow: false,
                options: formI ? [{ id: formI, text: formV }] : [],
                value: undefined
              }
            })
          })
          return r
        },
        [
          { id: 'dim', name: '查询维度', data: data.dim, multiple: true },
          { id: 'ind', name: '查询指标', data: data.ind, multiple: true },
          { id: 'date', name: '查询时间', field: data.acct_field, format: format, type: type }
        ]
      )
      // forms.value = forms
      queryType.value = data.query_type
      state.value.init = false
      let result = items.value.reduce((acc: any, obj: any) => {
        if (obj.id === 'dim' || obj.id === 'ind') {
          acc[obj.id] = obj.data.map((item: any) => item.id)
        }
        return acc
      }, {})
      selectTemplate(JSON.stringify(result), true)
      // nextTick(() => formRef.value && formRef.value.clearValidate())
      // this.$nextTick(() => this.$refs.form.clearValidate());
    })
    .finally(() => {
      state.value.init = false
      loadings.close()
      try {
        // formRef.value.resetField()
      } catch (e) {
        console.log(e)
      }
    })
}

let columns = computed(() => {
  let getColumns = (type: any) =>
    form.value[type] && form.value[type].length
      ? items.value
          .find((i: any) => i.id == type)
          .data.reduce((r: any, i: any) => {
            let index = form.value[type].indexOf(i.id)
            if (index >= 0) r.push({ name: i.text, prop: type + index })
            return r
          }, [])
      : []
  // this.$nextTick(() => this.$refs.table && this.$refs.table.doLayout())
  nextTick(() => tableRef.value && tableRef.value.doLayout())
  return getColumns('dim').concat(getColumns('ind'))
})

const selectTreeClear = (item: any, info: string) => {
  let tree = riskSpreadRefList.value[info]
  if (item.multiple) tree.setCheckedKeys([])
  else tree.setCurrentKey()
}

const selTreeChange = (item: any, checked: any, info: string) => {
  // console.log(item, checked, info)
  item.selected = checked
  if (item.multiple) {
    form.value[item.id] = checked.map((i: any) => {
      return {
        value: i.id,
        label: i.text
      }
    })
    // form.value[item.id] = checked.map((i: any) => i.id)
  } else {
    form.value[item.id] = {
      value: checked[0].id,
      label: checked[0].text
    }
    selRefList.value[info].blur()
  }
}

const doIfNotEmpty = (prop: any, action: any) => {
  let value = form.value[prop]
  if (value && !(Array.isArray(value) && !value.length)) action(value)
}

const loadData = (page?: any) => {
  report.value.list.rows = []
  if (page) report.value.query.page = page
  // console.log(page)

  formRef.value.validate(async (valid: any) => {
    if (!valid) return
    state.value.query = true
    await instance
      .post('/reportConfig/getData', {
        dbName: dbNameInfo.value,
        sqlId: 'reportQuery.query',
        sqlParam: JSON.stringify(getSqlParam().value),
        ...report.value.query
      })
      .then((data: any) => {
        if (data.error) return ElMessage({ message: '查询失败', type: 'error' })
        report.value.list = data
        if (page && !data.error) ElMessage({ message: '查询成功', type: 'success' })
      })
      .catch(() => ElMessage({ message: '查询失败', type: 'error' }))
      .finally(() => (state.value.query = false))
  })
}

const fileIdInfo = ref<any>()
const downloadData = () => {
  formRef.value.validate(async (valid: any) => {
    if (!valid) return
    let url = '/reportConfig/exportData'
    let param = columns.value.reduce(
      (r: any, i: any) => (r.title += i.name + ',1,1,false;') && r.columns.push(i.prop) && r,
      { title: '', columns: [], fileName: name.value, fileType: 'xlsx' }
    )
    state.value.download = true
    await instance
      .post(url, {
        dbName: dbNameInfo.value,
        sqlId: 'reportQuery.query',
        sqlParam: getSqlParam().value,
        ...param
      })
      .then((data: any) => {
        state.value.download = false
        if (data == 'error') return ElMessage({ message: '数据导出处理失败', type: 'error' })
        const str = String(data).split('.').join('')
        fileIdInfo.value = str.slice(0, 1) + '.' + str.slice(1) + 'E8'
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href =
          import.meta.env.VITE_APP_URL +
          '/common/getGridExcel?fileId=' +
          fileIdInfo.value +
          '&fileName=' +
          encodeURI(param.fileName) +
          '&fileType=' +
          param.fileType +
          '&remote=false'
        // link.setAttribute('download', props.fromInfo.title + '详情.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        // url =
        //   '.' +
        //   url +
        //   '?fileId=' +
        //   data +
        //   '&fileName=' +
        //   encodeURI(param.fileName) +
        //   '&fileType=' +
        //   param.fileType +
        //   '&token=' +
        //   localStorage.getItem('report.token')
        // download.value.src = url
      })
  })
}

// 数据处理
const getDataInfo = (data: any, i: any) => {
  // 数据处理 第二个判断是因为多选返回内容是个对象
  if (typeof data == 'string') {
    return data
  } else if (i.multiple && data.length && typeof data[0] === 'object') {
    return data.map((s: any) => s.value)
  } else if (i.multiple) {
    return data.map((s: any) => s)
  }
}
const extractFields = (array: any) => {
  // 创建一个空对象来存储结果
  let result: any = {}

  // 遍历数组中的每个对象
  array.forEach((obj: any) => {
    // 将对象的字段和值添加到结果对象中
    result[obj.field] = obj.value
  })

  // 返回结果对象
  return result
}

const getSqlParam = () => {
  // 此处修改
  /**
   * value: (i.multiple ? value : [value]).map((v: any) =>
   * value: (i.multiple ? value.map((s: any) => s.value) : [value.value]).map((v: any) =>
   */
  let sqlParam = ref<any>({
    target: target.value,
    acct: items.value.find((i: any) => i.id == 'date').field,
    cond: [],
    condList: items.value.filter((i: any) => i.id.includes('cond')).map((z: any) => z.field),
    query_type: queryType.value
  })
  // console.log('1113', items)
  items.value.forEach((i: any) => {
    doIfNotEmpty(i.id, (value: any) => {
      // console.log('1111', value)
      // getDataInfo(value)
      if (/^cond/.test(i.id))
        sqlParam.value.cond.push(
          i.isTree && i.field.startsWith('path:')
            ? {
                field: i.field.substr(5),
                value: (i.multiple ? value.map((s: any) => s.value) : [value.value]).map((v: any) =>
                  riskSpreadRefList.value[i.id]
                    .getNodePath(v)
                    .map((i: any) => i.id)
                    .join('/')
                ), //全路径值
                like: false
              }
            : {
                field: i.field,
                value: getDataInfo(value, i),
                like: !i.data
              }
        )
      else sqlParam.value[i.id] = form.value[i.id]
    })
    if (i.dim) {
      const conDimInfo = i.dim
        .filter((s: any) => s.value)
        .map((v: any) => {
          return {
            field: v.cond_field,
            value: v.value,
            like: false
          }
        })
      const conListDimInfo = i.dim.map((v: any) => v.cond_field)
      sqlParam.value.cond = sqlParam.value.cond.concat(conDimInfo)
      sqlParam.value.condList = sqlParam.value.condList.concat(conListDimInfo)
    }
  })
  if (queryType.value == '2') {
    sqlParam.value.cond = extractFields(sqlParam.value.cond)
    // console.log(sqlParam.value)
  }

  return sqlParam
}

const showTemplate = () => {
  template.value.filter = ''
  template.value.visible = true
  loadTemplate(1)
}
const loadTemplate = async (page?: any) => {
  if (page) template.value.query.page = 1 //每次点击查询时重置到第一页
  template.value.loading = true
  await instance
    .post('/common/getDataGrid', {
      dbName: 'report',
      sqlId: 'reportView.getTemplate',
      sqlParam: JSON.stringify({ report_id: id.value, template_name: template.value.filter }),
      ...template.value.query
    })
    .then((data: any) => {
      template.value.list = data
    })
    .catch((err) => {
      console.log(err)
    })
    .finally(() => (template.value.loading = false))
}

const saveTemplate = () => {
  let conf = items.value.reduce(
    (r: any, i: any) =>
      (i.id != 'date' && doIfNotEmpty(i.id, (v: any) => (r[i.field || i.id] = v))) || r,
    {}
  ) //记录配置条件（时间条件忽略）
  if (!conf.dim || !conf.ind) {
    ElMessage({ message: '维度、指标配置不能为空', type: 'error' })
    return formRef.value.validateField(['dim', 'ind'])
  } //必须有维度、指标配置
  ElMessageBox.prompt('模板名称', '保存模板', {
    closeOnClickModal: false,
    inputPattern: /\S+/,
    inputErrorMessage: '请输入模板名称'
  })
    .then(async ({ value }) => {
      state.value.saveTemplate = true
      await instance
        .post('/common/modify', {
          dbName: 'report',
          sqlId: 'reportView.addTemplate',
          sqlParam: {
            template_name: value,
            report_id: id.value,
            template_conf: JSON.stringify(conf)
          }
        })
        .then((res: any) => {
          if (res == 'success') ElMessage({ message: '模板保存成功', type: 'success' })
          else ElMessage({ message: '模板保存失败', type: 'error' })
        })
        .catch((err: any) => ElMessage({ message: err, type: 'error' }))
        .finally(() => (state.value.saveTemplate = false))
    })
    .catch(() => {})
}

const selectTemplate = (template_conf: any, formInit?: any) => {
  // console.log(template_conf)
  let conf = JSON.parse(template_conf)
  items.value.forEach((i: any) => {
    if (i.id != 'date' && formInit) {
      if (i.id == 'dim' || i.id == 'ind') {
        let val = conf[i.field || i.id]
        form.value[i.id] = val
      } else {
        return
      }
    }
    if (i.id != 'date') {
      let val = conf[i.field || i.id]
      form.value[i.id] = val
      if (i.isTree) {
        let tree = riskSpreadRefList.value[i.id] // this.$refs['tree_' + i.id][0];
        if (i.multiple) {
          tree.setCheckedKeys(val || [])
          i.selected = tree.getCheckedNodes()
        } else {
          tree.setCurrentKey(val)
          i.selected = (val && [tree.getCurrentNode()]) || []
        }
      }
    }
  }) //设置模板配置值
  template.value.visible = false
}

const deleteTemplate = (template_id: any) => {
  ElMessageBox.confirm('确定要删除所选模板吗？', '提示', { type: 'warning' })
    .then(() => {
      instance
        .post('/common/modify', { sqlId: 'reportView.delTemplate', sqlParam: { template_id } })
        .then((res) => {
          if (res.data == 'success') {
            ElMessage({ message: '模板删除成功', type: 'success' }) // this.$message.success('模板删除成功')
            loadTemplate()
          } else {
            ElMessage({ message: '模板删除失败', type: 'error' }) //this.$message.error('模板删除失败')
          }
        })
    })
    .catch(() => {})
}

const handleSize = (val: number) => {
  // console.log('handleSize', val)

  report.value.query.page = 1
  report.value.query.rows = val
  loadData(1)
}

const handleCurrent = (val: number) => {
  // console.log('handleCurrentChange', val)
  report.value.query.page = val
  loadData(val)
  return false
}

const templateSize = (val: number) => {
  template.value.query.page = 1
  template.value.query.rows = val
  loadTemplate(1)
}

const templateCurrent = (val: number) => {
  template.value.query.page = val
  loadTemplate()
}

const routerPath = useRouter()
watch(
  () => routerPath.currentRoute.value.path,
  () => {
    // init()
    if (route.meta.isMulti) {
      init()
    } else {
      loadings.close()
      return false
    }
  },
  { immediate: true }
)

const regionTreeFn = (node: Node, resolve: (data: any[]) => void) => {
  // console.log(node.level)

  // 树形结构地域
  if (node.level === 0) {
    const info = node.data.map((item: any) => {
      return {
        value: item.id,
        text: item.text,
        type: 'dept',
        id: item.id,
        children: item.children
      }
    })
    return resolve(info)
  } else {
    if (!node.data.children) return resolve([])
    setTimeout(() => {
      const data = node.data.children
      resolve(data)
    }, 200)
  }
  if (node.level > 1) {
    if (!node.data.children) {
      return resolve([])
      // node.data.children = []
    } else {
      setTimeout(() => {
        const data = node.data.children
        resolve(data)
      }, 200)
    }
  }
}

// 维度树形结构
const dimensionLoading = ref(false)
const dimensionChange = async (root: any, item: any, formInfo: any) => {
  item.isShow = !item.isShow
  if (!item.isShow) return false
  // console.log('root', root, 'item', item)

  form.value[formInfo] = ''
  item.options = []
  item.value = undefined
  dimensionLoading.value = true
  let params: any = {
    condField: item.cond_field,
    condValue: item.cond_value,
    dimId: item.dim_id,
    parentProp: undefined,
    parentPropValue: undefined
  }
  if (item.parent_prop !== '') {
    const parInfo = root.dim.filter((z: any) => z.cond_field === item.parent_prop)
    // console.log('parInfo', parInfo)
    if (!parInfo[0]) {
      params = {
        condField: item.cond_field,
        condValue: item.cond_value,
        dimId: item.dim_id
      }
    } else if (parInfo[0].value) {
      params = {
        condField: item.cond_field,
        condValue: item.cond_value,
        dimId: item.dim_id,
        parentProp: item.parent_prop,
        parentPropValue: parInfo[0].value
      }
    }
  }
  await instance
    .post('/reportConfig/getDimData', {
      sqlId: 'dimMgr.dimSortWithParent1',
      sqlParam: JSON.stringify(params)
    })
    .then((res: any) => {
      item.options =
        res.rows[0] === null || res.rows.length === 0
          ? []
          : res.rows.filter(
              (item: any) => item !== null && item !== undefined && item !== '' && item.length !== 0
            )
    })
    .finally(() => (dimensionLoading.value = false))
  // console.log('root', root, 'item', item)
}
const selChange = (val: any, item: any) => {
  item.value = form.value[val]
  form.value[val + '_name'] = item.options.find((i: any) => i.id === form.value[val])?.text
  // console.log('val', val, 'item', item)
}

// 合计
const tableInfo = ref<any>()
const trArry = ref<any>([])
const headerClick = (column: any) => {
  const index = trArry.value.indexOf(column.property)
  if (index !== -1) {
    trArry.value.splice(index, 1)
  } else {
    trArry.value.push(column.property)
  }
  const num = document.getElementsByClassName(column.id).length
  for (let i = 0; i < num; i++) {
    document.getElementsByClassName(column.id)[i].classList.toggle('bgc')
  }
  // console.log('headerClick', column)
  // nextTick(() => tableRef.value && tableRef.value.doLayout())
}
const getSummaries = (param: any) => {
  const { columns, data } = param
  tableInfo.value = param
  // console.log(param)

  const sums: any = []
  columns.forEach((column: any, index: number) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    if (!trArry.value.includes(column.property)) return false
    const values = data.map((item: any) => Number(item[column.property]))
    if (!values.every((value: any) => isNaN(value))) {
      sums[index] = values.reduce((prev: any, curr: any) => {
        const value = Number(curr)
        if (!isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
      // sums[index] += ''
    } else {
      sums[index] = ''
    }
  })

  return sums
}

onMounted(() => {
  // init()
  if (!navTabStore.multiInfoArry.map((i: any) => i.path).includes(route.path)) {
    init()
  }
})
</script>
<template>
  <!-- !state.init -->
  <div v-if="false" v-loading="true" class="h-100"></div>
  <div v-else class="customizedBox">
    <div class="queryFormBox">
      <el-scrollbar height="140px">
        <el-form inline ref="formRef" :model="form" :rules="rules" label-width="auto">
          <template v-for="item in items" :key="item.id">
            <el-form-item v-if="!item.dim" :label="item.name" :prop="item.id" class="report-item">
              <el-date-picker
                v-if="item.id == 'date'"
                v-model="form[item.id]"
                :type="item.type"
                :format="item.format"
                :value-format="item.format"
                placeholder="请选择"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                clearable
                style="width: 280px"
              />
              <el-input
                v-else-if="!item.data"
                v-model="form[item.id]"
                placeholder="请输入"
                clearable
              />
              <el-select
                v-else
                :ref="(el: any) => selRef(el, item.id)"
                v-model="form[item.id]"
                :class="{ 'select-tree': item.isTree }"
                :multiple="item.multiple"
                collapse-tags
                :filterable="!item.isTree"
                clearable
                style="width: 280px; height: auto"
                @clear="item.isTree && selectTreeClear(item, item.id)"
              >
                <template v-if="item.isTree">
                  <el-option
                    value=""
                    label=""
                    class="selectOption"
                    style="width: 320px; height: auto; padding: 0 8px"
                  >
                    <el-tree-v2
                      lazys
                      :load="regionTreeFn"
                      :ref="(el: any) => getRiskSpreadRef(el, item.id)"
                      :data="item.data"
                      node-key="id"
                      :props="{ label: 'text' }"
                      :expand-on-click-node="false"
                      :show-checkbox="item.multiple"
                      :highlight-current="!item.multiple"
                      @check="(d: any, c: any) => selTreeChange(item, c.checkedNodes, item.id)"
                      @node-click="(d: any) => !item.multiple && selTreeChange(item, [d], item.id)"
                    />
                  </el-option>
                </template>
                <el-option
                  v-else
                  v-for="d in item.data"
                  :key="d.id"
                  :value="d.id"
                  :label="d.text"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-else
              v-for="dimension in item.dim"
              :key="item.id + '_' + dimension.order_no"
              :label="dimension.cond_name"
              :prop="item.id + '_' + dimension.order_no"
              class="report-item"
            >
              <el-select-v2
                style="width: 280px; height: auto"
                :ref="(el: any) => selRef(el, item.id + '_' + dimension.order_no)"
                v-model="form[item.id + '_' + dimension.order_no]"
                clearable
                :props="{ value: 'id', label: 'text' }"
                :loading="dimensionLoading"
                :options="dimension.options"
                @visible-change="
                  dimensionChange(item, dimension, item.id + '_' + dimension.order_no)
                "
                @change="selChange(item.id + '_' + dimension.order_no, dimension)"
              >
              </el-select-v2>
            </el-form-item>
          </template>
        </el-form>
      </el-scrollbar>
    </div>
    <div class="reportButtons">
      <el-button :icon="Search" type="primary" :loading="state.query" @click="loadData(1)">
        查询
      </el-button>
      <el-button
        :icon="Document"
        type="success"
        :loading="state.download"
        @click="downloadData"
        plain
      >
        导出
      </el-button>
      <el-button
        :icon="Finished"
        type="primary"
        :loading="state.saveTemplate"
        @click="saveTemplate"
      >
        存为模板
      </el-button>
      <el-button :icon="Tickets" type="primary" @click="showTemplate">我的模板</el-button>
    </div>
    <el-table
      class="TableBox"
      ref="tableRef"
      :data="report.list.rows"
      :empty-text="columns.length ? ' ' : '请配置报表查询条件'"
      stripe
      border
      show-summary
      :summary-method="getSummaries"
      @header-click="headerClick"
      v-loading="state.query || state.download"
    >
      <el-table-column
        v-for="(item, i) in columns"
        :key="i"
        :prop="item.prop"
        :label="item.name"
        width="160"
        show-overflow-tooltip
      />
    </el-table>
    <el-pagination
      class="paginationBox"
      v-model:current-page="report.query.page"
      v-model:page-size="report.query.rows"
      :page-sizes="[2, 10, 20, 30, 40]"
      size="default"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Number(report.list.total)"
      @size-change="handleSize"
      @current-change="handleCurrent"
    >
    </el-pagination>
  </div>
  <el-dialog
    v-if="template.visible"
    title="报表模板"
    width="70%"
    @close="template.visible = false"
    :model-value="template.visible"
    class="dialogBox"
  >
    <div v-loading="template.loading">
      <div>
        <el-form inline>
          <el-form-item label="模板名称：">
            <el-input
              size="medium"
              v-model="template.filter"
              placeholder="输入模板名称查询"
              clearable
              @keyup.enter="loadTemplate()"
              style="width: 200px; margin-right: 10px"
            />
          </el-form-item>
          <el-form-item>
            <el-button :icon="Search" type="primary" @click="loadTemplate()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table class="TableBox" :data="template.list.rows" stripe border>
        <el-table-column
          label="序号"
          type="s"
          width="50"
          align="center"
          :index="(i: any) => i + template.query.rows * (template.query.page - 1) + 1"
        />
        <el-table-column label="模板名称" prop="template_name" min-width="300" />
        <el-table-column label="创建时间" prop="create_date" width="160" align="center" />
        <el-table-column label="操作" width="120">
          <template v-slot="{ row }">
            <el-link class="action" icon="el-icon-check" @click="selectTemplate(row.template_conf)"
              >选择</el-link
            >
            <el-link
              class="action text-danger"
              icon="el-icon-delete"
              @click="deleteTemplate(row.template_id)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="paginationBox"
        v-model:current-page="template.query.page"
        v-model:page-size="template.query.rows"
        :page-sizes="[1, 10, 20, 30, 40]"
        size="default"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(template.list.total)"
        @size-change="templateSize"
        @current-change="templateCurrent"
      />
      <!-- <pagination :total="template.list.total" :query="template.query" :loadData="loadTemplate" />  -->
    </div>
  </el-dialog>
</template>
<style scoped lang="less">
.customizedBox {
  padding: 8px;
  .queryFormBox {
    // max-height: 150px;
    padding: 8px 0;
    background-color: var(--cnac-bgc2);
    border-radius: 8px;
  }
  .reportButtons {
    margin: 10px 0;
  }
  .TableBox {
    height: calc(100vh - 420px);
  }
  :deep(.trBox) {
    cursor: pointer;
  }
  :deep(.bgc) {
    background: rgba(135, 206, 235, 0.8) !important;
  }
}

.dialogBox {
  .dialogForm {
    margin-top: 10px;
  }
  .TableBox {
    height: calc(70vh - 172px);
  }
  .paginationBox {
    position: unset;
  }
}
</style>
